<template>
	<view class="custom-category">

		<text>设置自定义分类名称</text>
		<uni-easyinput class="title" v-model="form.categoryName" focus></uni-easyinput>
		<text>选择图标</text>
		<view class="icons">
			<uni-icons v-for="item in CustomFontMap" class="icon" fontFamily="CustomFont" :size="30"
				@click="()=>selectIconChange(item.icon)"
				:color="form.iconName ===item.icon  ?'#559ae8' :'#333'">{{ unicodeToChar(item.icon)}}</uni-icons>

		</view>

		<view class="save-btn " @click="save">
			<text class="save-btn-text"> 保存</text>
		</view>

	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';
	import { generateUniqueCodeApi, incomeItemApi, expenditureItemApi } from "@/apis/apis"
	import { userStore } from '@/store/user'
	import { onLoad } from '@dcloudio/uni-app'
	import { unicodeToChar } from "@/utils/index"

	const SysUser = JSON.parse(uni.getStorageSync('SysUser') || '{}')
	const current = ref('0')
	const form = ref({
		"categoryName": "",
		"iconName": ""
	})
	let code = ''
	const getCode = async () => {
		const res : any = await generateUniqueCodeApi.generateUniqueCodeUsingGET({ prdfix: "XM" })
		console.log(res);
		code = res
	}


	// 自定义图标
	const CustomFontMap = [
		{
			name: '医疗',
			icon: "\\ue656"
		},
		{
			name: '药物',
			icon: '\\ue7f7'
		},
		{
			name: '购物',
			icon: '\\ue7f2'
		},
		{
			name: '衣服',
			icon: '\\ue62a'
		},

		{
			name: '饮品',
			icon: '\\ue61a'
		}
		,
		{
			name: '水电',
			icon: '\\ue61c'
		}
		,
		{
			name: '酒店住宿',
			icon: '\\ue60f'
		}
		,
		{
			name: '日用品',
			icon: '\\ue620'
		}
		,
		{
			name: '蔬菜',
			icon: '\\ue606'
		}
		,
		{
			name: '零食',
			icon: '\\ue615'
		}
		,
		{
			name: '餐饮',
			icon: '\\ue8a4'
		},
		{
			name: '水果',
			icon: '\\ue882'
		}
		,
		{
			name: '出差',
			icon: '\\ue64c'
		},
		{
			name: '公交',
			icon: '\\ue600'
		},
		{
			name: '酒水',
			icon: '\\ue643'
		},
		{
			name: '彩票',
			icon: '\\ue614'
		}
	]

	onLoad((options : any) => {
		current.value = options.current
		getCode()
	})
	const selectIconChange = (e : string) => {
		form.value.iconName = e
	}

	const save = async () => {
		if (!form.value.categoryName) return uni.showToast({ title: '请输入名称', icon: 'error' })
		if (!form.value.iconName) return uni.showToast({ title: '请选择图标', icon: 'error' })
		let res : any = null
		const params : any = { ...form.value }
		if (current.value == '0') {

			res = await expenditureItemApi.addUsingPOST_3({
				"expenditureName": form.value.categoryName,
				"expenditureNumber": code,
				iconName: form.value.iconName,
				"userId": userStore.SysUser?.id
			})
		} else {
			res = await incomeItemApi.addUsingPOST_5({

				"incomeName": form.value.categoryName,
				"incomeNumber": code,
				iconName: form.value.iconName,
				"userId": userStore.SysUser?.id
			})
		}

		if (res.code == 200) {
			uni.showToast({ title: res.msg, icon: 'success' })
			uni.navigateBack()
		}
	}
</script>

<style lang="scss" scoped>
	.custom-category {
		height: 100vh;
		padding: 20px 20px 0;
		overflow: hidden;

		.title {
			margin: 20px 0;
		}

		.icons {
			padding-top: 10px;
			display: flex;
			flex-wrap: wrap;
			line-height: 40px;

			.icon {
				margin: 10px;
			}
		}
	}
</style>